<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>D3交互式数据可视化</title>
	<style>
		.axis path,
			.axis line{
				fill: none;
				stroke: black;
				shape-rendering: optimizeSpeed;
			}
			.axis text{
				font-size: 12px;
				font-family: sans-serif;
			}
			.dot{
				margin: 20px auto;
				width: 500px;
				height: 500px;
				border:1px solid skyblue;
			}
			.btn{
				text-align: center;
			}
	</style>
</head>
<body>
	<ul>
		<li>应用过度的场合：</li>
		<li>元素刚出现的时候</li>
		<li>元素被更新的时候--用户操作</li>
		<li>元素被删除的时候</li>
	</ul>
	<p class="btn">
		<button onclick="update()">更新</button>
		<button onclick="add()">增加</button>
		<button onclick="sub()">减少</button>
	</p>
	<div class="dot">
		
	</div>
	<script src="js/d3_3.5.7.js"></script>
	<script>
		var width = 500;
		var height = 500
		var svg = d3.select(".dot").append('svg').attr({"width":width,"height":height});

		var center = [[0.5,0.5],[0.7,0.8],[0.4,0.9],[0.11,0.32],[0.88,0.25],[0.75,0.12],[0.5,0.1],[0.2,0.3],[0.4,0.1],[0.6,0.7]];
		var padding = {top:30,right: 30,bottom:30,left: 30};
		var xAxisWidth = 300;
		var yAxisWidth = 300;

		var xScale = d3.scale.linear()
									.domain([0,1])
									.range([0,xAxisWidth])

		var yScale = d3.scale.linear()
									.domain([0,1])
									.range([0,yAxisWidth])

		function drawCircle() {
			var circleUpdate = svg.selectAll("circle").data(center);
			var circleEnter = circleUpdate.enter();
			var circleExit = circleUpdate.exit();

			circleUpdate.transition().duration(500)
									.attr("cx",function(d) {
										return padding.left + xScale(d[0]);
									})
									.attr("cy",function(d) {
										return height - padding.bottom - yScale(d[1]);
									});

			circleEnter.append("circle")
									.attr("fill","black")
									.attr("cx",padding.left)
									.attr("cy",height - padding.bottom)
									.attr("r",7)
									.transition().duration(500)
									.attr("cx",function(d) {
										return padding.left + xScale(d[0]);
									})
									.attr("cy",function(d) {
										return height - padding.bottom - yScale(d[1]);
									})

			circleExit.transition().duration(500).attr("fill","white").remove()
		}

		function drawAxis() {
			var xAxis = d3.svg.axis()
									.scale(xScale)
									.orient("bottom")
									.ticks(5)

			yScale.range([yAxisWidth,0]);

			var yAxis = d3.svg.axis()
										.scale(yScale)
										.orient("left")
										.ticks(5)

			svg.append("g")
				.attr("class","axis")
				.attr("transform","translate(" + padding.left + "," + (height - padding.bottom) +")")
				.call(xAxis);

			svg.append("g")
				.attr("class","axis")
				.attr("transform","translate(" + padding.left + "," + (height - padding.bottom - yAxisWidth) +")")
				.call(yAxis);

			yScale.range([0,yAxisWidth])
		}
		drawAxis()

		function update() {
			for(var i = 0;i < center.length;i++) {
				center[i][0] = Math.random();
				center[i][1] = Math.random();
			}
			drawCircle()
		}
		function add() {
			center.push([Math.random(),Math.random()]);
			drawCircle();
		}
		function sub() {
			center.pop();
			drawCircle();
		}

	</script>
</body>
</html>